<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: '#itany',
                data: {
                    bb: 'aa',
                    dd: 'cc',
                    flag: true,
                    num: 3,
                    hello: {
                       aa: true,
                       cc: true
                    }
                }
            });
        }
    </script>
    <style>
        .aa {
            color: red;
            font-size: 20px;
        }

        .cc {
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div id="itany">
    <!-- 可以访问，普通css访问 -->
    <!--    <p class="aa">天安云谷</p>-->

    <!-- 不可以，Vue的属性绑定时不能直接css样式 -->
    <!--    <p :class="aa">天安云谷</p>-->

    <!-- 方式1，通过变量形式来设值 -->
    <!--    <p :class="bb">天安云谷</p>-->

    <!-- 方式2，数组形式，同时引用多个 -->
    <!--    <p :class="[bb,dd]">天安云谷</p>-->

    <!-- 方式3，json形式，常用 -->
    <!--    <p :class="{aa: true, cc: flag}">天安云谷</p>-->
<!--    <p :class="{aa: num > 0}">天安云谷</p>-->

    <!-- 方式4，变量引用json形式 -->
    <p :class="hello">天安云谷</p>
</div>
</body>
</html>